myajax('../../../json/top.json')
    .then(res => {
        console.log(res.data);
        xrtopList(res)
        $('.xiaobang').eq(3).addClass('ac');
        // console.log($('.xiaobang'));

        //渲染时间
        $(document).on('click', ".xiaobang", function () {
            $('.xiaobang').removeClass('ac');
            $(this).addClass('ac');
            $("#bs1").text($(this).text());
            $("#riqi").text($(this).next().text());


        })
    })
//渲染TAB的方法

function xrtopList(shuju) {
    shuju.data.forEach((v, k) => {
        $(".top_list").append("<div id='bangtou'></div>")
        $("#bangtou").append(`<div class="dabiaoti">${v.title}</div>`)
        v.list.forEach((l, m) => {

            $("#bangtou").append(`<div class="xiaobang" topId='${l.topId}'>${l.label}</div>`)

            $("#bangtou").append(`<div class="riqishuju"  style="display:none">${l.updateTime}</div>`)
        })
    });
}
//初始渲染歌曲
myajax(`http://47.97.121.9:3300/getRanks?topId=4`).then(res => {
    res = res.response.req_1.data.data.song;
    console.log(res);
    // console.log(res.data.list);
    xrgeQu(res)
    $(document).on('mouseover', "#gequye .mv1", function () {
        $(this).children().eq(1).css("display", "block")
    })
    $(document).on('mouseout', "#gequye .mv1", function () {
        $(this).children().eq(1).css("display", "none")
    })
    $(".paiming").eq(0).css("color", "red")
    $(".paiming").eq(1).css("color", "red")
    $(".paiming").eq(2).css("color", "red")
})
//切换歌曲渲染
$(document).on('click', ".xiaobang", function () {
    // console.log($(this).attr('topid'));
    // console.log(this.getAttribute('topid'));
    // console.log(this.setAttribute('topid',''));
    //接受歌曲json数据
    if (this.getAttribute('topid') == 201) return;
    myajax(`http://47.97.121.9:3300/getRanks?topId=${this.getAttribute('topid')}`).then(res => {
        res = res.response.req_1.data.data.song;
        console.log(res);
        // console.log(res.data.list);
        xrgeQu(res)
        $(document).on('mouseover', "#gequye .mv1", function () {
            $(this).children().eq(1).css("display", "block")
        })
        $(document).on('mouseout', "#gequye .mv1", function () {
            $(this).children().eq(1).css("display", "none")
        })
        $(".paiming").eq(0).css("color", "red")
        $(".paiming").eq(1).css("color", "red")
        $(".paiming").eq(2).css("color", "red")
    })
})


//渲染歌曲
function xrgeQu(shuju) {
    $("section .mv1").remove();
    shuju.forEach((v, k) => {
        if (k < 20) {
            $("section").append(`<div class='mv1'><ul>
        <li class='paiming'>${v.rank}</li>
        <li>
            <div class="xb">
                <div class="iconfont icon-zengchang" style="font-size: 20px;"></div>
                <div class="zzl">${v.rankValue}</div>
            </div>
        </li>
        <div class="kuang">
            <li><img width="100%" height="100%" src="https://y.qq.com/music/photo_new/T002R300x300M000${v.albumMid}.jpg?max_age=2592000"></li>
            <li>${v.title}</li>
            <li></li>
        </div>
        <li class="mz"><span>${v.singerName}</span></li>
        <li class="sj">03:14</li>

    </ul>
    <ul class="tb1">
        <div>
            <li class="iconfont icon-bofang2" style="font-size: 30px; width: 20px;height:20px;"></li>
        </div>
        <div>
            <li class="iconfont icon-danchuang_tianjiadaogedan_"
                style="font-size:30px;width: 20px ;height:20px;"></li>
        </div>
        <div>
            <li class="iconfont icon-fenxiang" style="font-size: 28px ;width: 20px ;height:20px;"></li>
        </div>

    </ul></div>`)
        } else {
            return;
        }

    });
}
